<template>
  <div id="likeList">
    <div class="title">猜你喜欢</div>
    <div class="likeItem" v-for="Like in LikeList" :key="Like.albumId">
      <van-card
        class="card"
        :title="Like.albumTitle"
        :thumb="`https://imagev2.xmcdn.com/${Like.albumCoverPath}`"
        :desc="Like.intro"
        @click="goDetail(Like.albumId)"
      >
        <template #tags>
          <van-icon
            name="play"
            size="10"
            style="
              margin-left: 10px;
              margin-top: 30px;
              margin-right: 25px;
              background-color: transparent;
            "
            >{{ useFormatPlayCount(Like.albumPlayCount) }}</van-icon
          >

          <van-icon name="tv-o" size="10">{{
            useFormatPlayCount(Like.albumTrackCount)
          }}</van-icon>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue';

export default defineComponent({
  name: 'LikeDetail',
});
</script>

<script setup lang="ts">
import { reqGetLikeList } from '@/api/scz-detail.ts';
import { useFormatPlayCount } from '@/mixin/playCount.ts';
import { useRouter, useRoute } from 'vue-router';
import { useRandomPage } from '@/mixin/randomPage.ts';
//猜你喜欢列表数据
const route = useRoute();
const router = useRouter();
const page = ref(1);
const pageSize = ref(5);
const LikeList = ref([]);

watch(
  () => route.params.id,
  () => {
    getLikeList();
  },
  {
    immediate: true,
  }
);
//-----封装一个获取猜你喜欢列表数据的函数------
async function getLikeList() {
  const res = await reqGetLikeList(page.value, pageSize.value, 1);

  // console.log(res, '猜你喜欢列表');
  page.value = useRandomPage(pageSize.value, res.data.total);
  //将数据存储
  LikeList.value = res.data.albums;
}

// 跳转到详情
function goDetail(albumId: number) {
  router.push(`/detail/${albumId}`);
}
</script>

<style scoped lang="less">
.title {
  padding-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}
</style>
